<template>
  <view :class="classNameList">
    <view v-if="label" class="_label">
      <view class="_name">
        <view v-if="required" class="_required">*</view>
        <text>{{ label }}</text>
      </view>
      <view v-if="desc" class="_desc">
        {{ desc}}
      </view>
    </view>
    <view class="_content" :style="{'text-align': textAlign}" @click.stop="onClick">
      <slot />
    </view>
    <view v-if="suffixIcon" class="_suffix">
      <x-icon v-if="suffixIcon" :name="suffixIcon" :color="suffixIconColor" :size="suffixIconSize" />
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';

export default {
  name: 'XFormItem',
  components: {
    XIcon
  },
  props: {
    label: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    last: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    flex: {
      type: Boolean,
      default: true
    },
    // 对齐方式
    textAlign: {
      type: String,
      default: 'right'
    },
    suffixIcon: {
      type: String,
      default: ''
    },
    suffixIconColor: {
      type: String,
      default: '#999'
    },
    suffixIconSize: {
      type: [Number, String],
      default: 32
    }
  },
  data() {
    return {};
  },
  computed: {
    classNameList() {
      const arr = ['x-form-item'];
      if (this.flex) {
        arr.push('is-flex');
      }
      if (this.last) {
        arr.push('is-last');
      }
      return arr.join(' ');
    }
  },
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
};
</script>

<style lang="scss">
  .x-form-item{
    border-bottom: 2px solid $uni-bg-color-grey; padding: 20px 20px 20px 0;
    &.is-flex{ display: flex; align-items: center;}
    &.is-last{ border-bottom: 0;}
    ._content{ flex: 1;}
    ._name{ display: flex; align-items: center;font-size: 28px;}
    ._desc{ font-size: 28px; color: $uni-color-info; padding-top: 10px; width: 320px;}
    ._required{ color: #F41D1D; padding-right: 10px;}
    ._suffix{margin-left: 8px}
  }
</style>
